<template>
    <div>
      <div class="header">
        <el-col :span="4" :push="1">
          <el-select v-model="states" value-key="states" @change="changeState()" style="margin-top: 10px;width:78%" filterable placeholder="请选择状态">
            <el-option v-for="item in optiont" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :push="2">
          <el-input style="margin-top:10px" v-model="search" @change="searchPage()"
                    oninput="value=value.replace(/\s*/g, '')" placeholder="投诉主题" suffix-icon="el-icon-search"></el-input>
        </el-col>
        <el-col :span="4" :push="4">
          <el-button icon="el-icon-circle-plus" style="margin-top:10px" @click="clear">新建</el-button>
        </el-col>
      </div>
      <el-table :data="tableData" :default-sort = "{prop: 'servDate', order: 'descending'}" style="width:100%">
        <el-table-column prop="planId" type="selection"></el-table-column>
        <el-table-column prop="planSubject" width="300px" label="投诉主题">
          <template slot-scope="e">
            <span class="information-title">{{e.row.planSubject}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customerByCustomId.cusName" label="对应客户"></el-table-column>
        <el-table-column prop="planDate" sortable label="日期">
          <template slot-scope="s">
            {{s.row.planDate | formatDate}}
          </template>
        </el-table-column>
        <el-table-column prop="planUrgecy" label="紧急程度">
          <template slot-scope="s">
            {{s.row.planUrgecy | formatDegree}}
          </template>
        </el-table-column>
        <el-table-column prop="planReceiver" label="首问接待人"></el-table-column>
        <el-table-column prop="planResult" label="处理结果">
          <template slot-scope="s">
            {{s.row.planResult | formatState}}
          </template>
        </el-table-column>
        <el-table-column prop="planComplain" label="投诉人"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="s">
            <i class="el-icon-edit" title="修改" style="font-size:17px;cursor:pointer" @click="update(s.row.planId)"></i>
            <i class="el-icon-delete" title="删除" style="font-size:17px;cursor:pointer" @click="deletePlanId(s.row.planId)"></i>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <!-- custom-class="dialog_color"  -->
      <el-dialog title="投诉管理" :visible.sync="dialogFormVisible" width="65%">
        <hr class="border-t-a"/>
        <el-form :model="complain" ref="complain" :rules="rules" label-width="100px" label-position="right" style="margin-left: 20px">
          <el-form-item label="投诉主题" prop="planSubject">
            <el-input style="width:655px" v-model="complain.planSubject" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="对应客户" prop="customerByCustomId.customId">
            <el-select v-model="complain.customerByCustomId.customId"
                       value-key="complain.customerByCustomId.customId"
                       style="width: 655px" filterable @change="customerByPerson"
                       placeholder="请选择客户">
              <el-option v-for="cus in customerList" :key="cus.customId" :label="cus.cusName" :value="cus.customId"></el-option>
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="首问接待人" prop="planReceiver">
                <el-select v-model="complain.planReceiver" value-key="complain.planReceiver"
                           style="width: 234px" filterable remote
                           placeholder="请选择执行人">
                  <el-option v-for="e in empList" :key="e.empName" :value="e.empName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类">
                <el-select v-model="complain.planClass" style="width:234px" filterable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              autosize
              v-model="complain.planDescribe"
              style="width:655px">
            </el-input>
          </el-form-item>
          <el-row>
            <el-form-item label="接单日期">
              <el-date-picker
                v-model="complain.planDate"
                align="right"
                type="datetime"
                style="width: 655px"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item label="投诉人">
            <el-select v-model="complain.planComplain"
                       value-key="complain.planComplain" filterable remote
                       placeholder="请选择投诉人" style="width: 655px">
              <el-option v-for="link in linkList" :key="link.cupName" :value="link.cupName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="紧急程度">
            <el-radio-group v-model="complain.planUrgecy">
              <el-radio :label="1">非常紧急</el-radio>
              <el-radio :label="2">急</el-radio>
              <el-radio :label="3">普通</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="处理过程">
            <el-input
              type="textarea"
              autosize
              v-model="complain.planCourse"
              style="width:655px">
            </el-input>
          </el-form-item>
          <el-form-item label="处理结果">
            <el-radio-group v-model="complain.planResult">
              <el-radio :label="1">未处理</el-radio>
              <el-radio :label="2">处理中</el-radio>
              <el-radio :label="3">处理完成</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="花费时间">
            <el-select v-model="complain.planDates" style="width:655px" filterable placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户反馈">
            <el-input
              type="textarea"
              autosize
              v-model="complain.planTicks"
              style="width:655px">
            </el-input>
          </el-form-item>
          <el-form-item label="回访确认">
            <el-input
              type="textarea"
              autosize
              v-model="complain.planPay"
              style="width:655px">
            </el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              autosize
              v-model="complain.planRemark"
              style="width:655px">
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="2" :push="21">
              <el-button icon="el-icon-check" @click="addPlan('complain')">确定</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <el-row style="background-color: white">
        <!-- 分页 -->
        <div class="limit">
          <el-pagination
            :current-page.sync="currPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @current-change="changePage">
          </el-pagination>
          <p></p>
        </div>
      </el-row>
      <el-row style="height: 500px;background-color:white">
        <el-row style="font-size: 12px;font-weight: 600;margin-top: 20px">
          <el-col :span="12" :push="1">
            <span><b>分布</b></span>
          </el-col>
          <el-col :span="10">
            <span style="margin-left: 20px"><b>Top</b></span>
          </el-col>
        </el-row>
        <el-col :span="12">
          <!-- 饼状图 -->
          <div style="height:400px" ref="pieCharts"></div>
          <div>
            <el-select style="margin-left: 120px;width: 300px" v-model="pieSelect" value-key="pieSelect" @change="changePieChart">
              <el-option v-for=" p in pieChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
            </el-select>
          </div>
        </el-col>
        <!-- 柱状图 -->
        <el-col :span="12">
          <div style="height:400px" ref="barCharts"></div>
          <div>
            <el-select style="margin-left:100px;width: 300px" v-model="barSelect" value-key="barSelect" @change="changeBarChart">
              <el-option v-for=" p in barChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
      name: "AsComplain",
      data: function () {
        return {
          tableData: [],
          complain:{
            planId:'',
            planSubject:'',
            planClass:'',
            planDate:'',
            planUrgecy:'',
            planReceiver:'',
            planResult:'',
            planComplain:'',
            planDescribe:'',
            planCourse:'',
            planDates:'',
            planTicks:'',
            planPay:'',
            planRemark:'',
            planDelete:'',
            customerByCustomId:{
              customId:'',
              cusName:''
            }
          },
          customerList:[],  //客户列表
          empList:[],       //员工列表
          linkList:[],      //联系人列表
          repairMonthList: [],//饼状图数据
          deliveredList: [],  //柱状图数量
          deliveredMonthList: [],//柱状图月份
          states:'',       //下拉框
          search:'',       //按条件查询
          pieSelect: 1,    //饼状图选择器
          barSelect: 1,    //柱状图选择器
          //分页
          currPage: 1,     //当前页
          totalSize: 0,    //总条数
          pageSize: 5,     //页大小
          optiont:[{
            value: '1',
            label: '非常紧急'
          }, {
            value: '2',
            label: '急'
          }, {
            value: '3',
            label: '普通'
          }],
          options: [{
            value: '选项1',
            label: '产品投诉'
          }, {
            value: '选项2',
            label: '服务投诉'
          }, {
            value: '选项3',
            label: '客户意见'
          }, {
            value: '选项4',
            label: '其它'
          }],
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          option: [{
            value: '选项1',
            label: '1小时'
          }, {
            value: '选项2',
            label: '2小时'
          }, {
            value: '选项3',
            label: '3小时'
          }, {
            value: '选项4',
            label: '半个工作日'
          }, {
            value: '选项5',
            label: '1个工作日'
          }, {
            value: '选项6',
            label: '2个工作日'
          }, {
            value: '选项7',
            label: '2个工作日以上'
          }],
          pieChartOptions:[{
            value: 1,
            label: '投诉花费时间分布'
          }, {
            value: 2,
            label: '投诉类型分布'
          }],
          barChartOptions:[{
            value: 1,
            label: '投诉月度统计'
          }, {
            value: 2,
            label: '客户投诉次数月度统计'
          }],
          dialogFormVisible:false,
          //表单校验
          rules: {
            'customerByCustomId.customId': [
              {required: true, message: '请选择客户', trigger: 'change' },
            ],
            planSubject: [
              {required: true, message: '请输入主题内容', trigger: 'blur'},
              {min: 1, max: 250, message: '长度在 1 到 250 个字符', trigger: 'blur'}
            ],
            planReceiver: [
              {required: true, message: '请选择首问接待人', trigger: 'change'},
            ]
          }
        }
      },
      created:function() {
        this.initData(this.states, this.search, this.currPage, this.pageSize);

        this.$axios.get("http://localhost:8088/crm/check-all"
        ).then(v=>{
          this.customerList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.$axios.get("http://localhost:8088/ser/check-emp"
        ).then(v=>{//员工
          this.empList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.pieChartOne();
        this.barChartOne();
      },
      methods:{
        initData(states,search,currPage,pageSize){
          this.$axios.get("http://localhost:8088/pla/plan-page",
            {params:{states:states,search:search,currPage:currPage,pageSize:pageSize}}
          ).then(v=>{
            this.tableData = v.data.rows;
            this.totalSize = v.data.total;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        },
        changePage(currPage){
          this.initData(this.states,this.search,currPage,this.pageSize);
        },
        changeState(){
          this.initData(this.states,this.search,this.currPage,this.pageSize);
        },
        searchPage(){
          this.initData(this.states,this.search,this.currPage,this.pageSize);
        },
        customerByPerson(){//根据客户查出联系人
          var person = this.complain.customerByCustomId.customId;
          if(person != undefined && person != ''){
            this.$axios.get("http://localhost:8088/crm/check-link",
              {params:{person:person}}
            ).then(v=>{
              this.linkList = v.data;
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
          }
        },
        pieChartOne(){
          this.$axios.get("http://localhost:8088/pla/plan-date"
          ).then(v=>{//投诉花费时间分布
            this.repairMonthList = v.data;
          })
        },
        pieChartTwo(){
          this.$axios.get("http://localhost:8088/pla/plan-class"
          ).then(v=>{//投诉类型分布
            this.repairMonthList = v.data;
          })
        },
        changePieChart(){
          this.repairMonthList = [];
          if(this.pieSelect == 1){
            this.pieChartOne();
          }else if(this.pieSelect == 2){
            this.pieChartTwo();
          }
        },
        pieChart(){
          let myChart = this.$echarts.init(this.$refs.pieCharts);//显示
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [{
              name: '分布',
              type: 'pie',
              radius: '74%',
              center: ['50%', '50%'],
              clockwise: false,
              data: this.repairMonthList,
              label: {
                normal: {
                  textStyle: {
                    color: '#999',
                    fontSize: 14,
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#ffffff',
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }],
            color: [
              '#00acee',
              '#52cdd5',
              '#79d9f1',
              '#a7e7ff',
              '#c8efff'
            ],
            backgroundColor: '#fff'
          })
        },
        barChartOne(){
          this.$axios.get("http://localhost:8088/pla/date-count"
          ).then(v=>{//投诉月度统计数
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/pla/date-month"
          ).then(v=>{//投诉月度统计的月份
            this.deliveredMonthList = v.data;
          })
        },
        barChartTwo(){
          this.$axios.get("http://localhost:8088/pla/custom-count"
          ).then(v=>{//客户投诉次数月度统计数
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/pla/custom-name"
          ).then(v=>{//客户投诉次数月度统计的月份
            this.deliveredMonthList = v.data;
          })
        },
        changeBarChart(){
          this.deliveredList = [];
          this.deliveredMonthList = [];
          if(this.barSelect == 1){
            this.barChartOne();
          }else if(this.barSelect == 2){
            this.barChartTwo();
          }
        },
        barChart(){
          let myChart = this.$echarts.init(this.$refs.barCharts);//显示
          myChart.setOption({
            color: ['#3b9ffc'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '30',
              right: '30',
              bottom: '20',
              containLabel: true
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
            },
            calculable: true,
            xAxis: {
              splitLine: {
                show: false
              }, //去除网格线
              splitArea: {
                show: false
              }, //保留网格区域
              axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                  color: '#808492',
                  width: 0.6, //这里是为了突出显示加上的
                },
              },
              axisTick: {
                show: true
              },
              axisLabel: { //轴上的数据样式
                color: '#808492',
              },
              data: this.deliveredMonthList,
            },
            yAxis: {
              show: true,
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(33,148,246,0.2)'
                }
              },
              axisLabel: {
                textStyle: {
                  fontSize: 12,
                  color: '#808492'
                }
              }
            },
            series: [{
              type: 'bar',
              barWidth: 15, // 柱形的宽度
              barGap: 0,
              data: this.deliveredList,
            },
              {
                type: 'line',
                data: this.deliveredList,
                symbol: 'none',
                symbolSize: '10',
                name: '总计',
                lineStyle: {
                  //折线样式
                  color: "#ffc83b"
                },
              }
            ]
          })
        },
        addPlan(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$axios.post("http://localhost:8088/pla/save-plan",{
                planId:this.complain.planId,
                planSubject:this.complain.planSubject,
                planClass:this.complain.planClass,
                planDate:this.complain.planDate,
                planUrgecy:this.complain.planUrgecy,
                planReceiver:this.complain.planReceiver,
                planResult:this.complain.planResult,
                planComplain:this.complain.planComplain,
                planDescribe:this.complain.planDescribe,
                planCourse:this.complain.planCourse,
                planDates:this.complain.planDates,
                planTicks:this.complain.planTicks,
                planPay:this.complain.planPay,
                planRemark:this.complain.planRemark,
                planDelete:this.complain.planDelete,
                customerByCustomId:this.complain.customerByCustomId
              }).then(v=>{
                this.$message.success("新增成功");
                this.dialogFormVisible = false;
                this.complain = {
                  planId: '',
                  planSubject: '',
                  planClass: '',
                  planDate: '',
                  planUrgecy: '',
                  planReceiver: '',
                  planResult: '',
                  planComplain: '',
                  planDescribe: '',
                  planCourse: '',
                  planDates: '',
                  planTicks: '',
                  planPay: '',
                  planRemark: '',
                  planDelete: '',
                  customerByCustomId: {
                    customId: '',
                    cusName: ''
                  }
                };
                this.initData(this.states, this.search, this.currPage, this.pageSize);
              }).catch(v=>{
                alert("访问失败!"+v.data);
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        update(planId){//修改
          this.$axios.get("http://localhost:8088/pla/check-plan",
            {params:{planId:planId}}
          ).then(v=>{
            this.dialogFormVisible = true;
            this.complain = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        },
        deletePlanId(planId){//删除
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.get("http://localhost:8088/pla/delete-plan",
              {params: {planId:planId}}
            ).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新数据
              this.initData(this.states, this.search, this.currPage, this.pageSize);
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
        },
        clear() {
          this.dialogFormVisible = true;
          this.complain = {
            planId: '',
            planSubject: '',
            planClass: '',
            planDate: '',
            planUrgecy: '',
            planReceiver: '',
            planResult: '',
            planComplain: '',
            planDescribe: '',
            planCourse: '',
            planDates: '',
            planTicks: '',
            planPay: '',
            planRemark: '',
            planDelete: '',
            customerByCustomId: {
              customId: '',
              cusName: ''
            }
          }
        }
      },
      mounted () {
        setTimeout(()=>{this.pieChart()},500);
        setTimeout(()=>{this.barChart()},500);
      },
      watch: {
        repairMonthList(val) {
          this.pieChart();
        },
        deliveredMonthList(val){
          this.barChart();
        },
        deliveredList(val){
          this.barChart();
        }
      },
      filters: {
        formatDegree: function (degree){
          if(degree != null && degree != ''){
            if(degree == 1){
              return "非常紧急"
            }
            if(degree == 2){
              return "急"
            }
            if(degree == 3){
              return "普通"
            }
          }
        },
        formatState: function (state) {
          if (state != null && state != '') {
            if(state == 1){
              return "未处理"
            }
            if(state == 2){
              return "处理中"
            }
            if(state == 3){
              return "处理完成"
            }
          } else {
            return "";
          }
        },
        formatDate(time){
          let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
          let year   = date.getFullYear();
          let month  = date.getMonth()+1;
          let day    = date.getDate();
          let hour   = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return year+"-"+month+"-"+day;
          /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
        }
      }
    }
</script>

<style scoped>
  .header{
    border: 1px solid white;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .border-t-a {
    border-top: 1px solid #aaaaaa;
    margin-top: -20px;
    margin-bottom: 30px;
  }
  .information-title {
    width: 300px;   /*一定要设置宽度，或者元素内含的百分比*/
    overflow:hidden; /*溢出的部分隐藏*/
    white-space: nowrap; /*文本不换行*/
    text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
  }
</style>
